import React from 'react'
import {connect} from 'react-redux'

import './ContentList.scss'
import ListItem from 'component/ListItem/ListItem.jsx'
import ScrollView from 'component/ScrollView/ScrollView.jsx'
import {getListData} from '../actions/contentListAction.js'

class ContentList extends React.Component{
  constructor(props){
    super(props)
    this.fetchData()
  }
  onLoadPage(){
    if(this.props.page <= 3){
      this.fetchData()
    }
  }
  fetchData(){
    console.log('this props is:', this.props)
    this.props.dispatch(getListData({}))
  }
  renderItems(){
    let lists = this.props.lists
    return lists.map((list, index) => {
      return(
        <ListItem key={index} itemData={list}></ListItem>
      )
    })
  }
  render(){
    return(
      <div className='list-content'>
        <ScrollView loadCallback={this.onLoadPage.bind(this)} isend={this.props.isend}>
          {this.renderItems()}
        </ScrollView>
      </div>
    )
  }
}

export default connect(
  state => ({
    lists: state.contentListReducer.lists,
    page: state.contentListReducer.page,
    isend: state.contentListReducer.isend
  })
)(ContentList)